<template>
  <div class="public-box right-mid">
    <p class="public-tit">{{this.title}}（TOP5）</p>
    <div style="width: 100%;margin-top: 60px">
      <!--<ul ref="tab" class="tab-ul">-->
        <!--<li v-for="(item,index) in items" :key="index" :class="{'hov':num===index}" @click="clickTab(index)">-->
          <!--{{ item.title }}（TOP5）-->
        <!--</li>-->
      <!--</ul>-->
      <el-scrollbar class="left-scrollbar" style="height: 100%">
        <div v-for="(item,index) in baseItems" :key="index" class="each">
          <div class="flex-space-between">
            <span class="city-name font-28"> {{ item.title }}</span>
            <strong class="font-28" :class="[num?'yellow-text':'green-text']">{{ item.count }}</strong>
          </div>
          <el-progress
            :class="[num?'yellow-progress':'green-progress']"
            :percentage="item.percent"
            :show-text="false"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { stt } from '@/models/screen'

export default {
  name: 'RightMid',
  data() {
    return {
      items: [],
      num: 0,
      baseItems: [],
      title:''
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const { data } = await stt.getScreenStatisticsBaseConstruction()
      this.title = data[0].title
      console.log(data)
      this.items = data
      this.baseItems = data[0].dataList
    },
    clickTab(index) {
      this.num = index
      this.baseItems = this.items[index].dataList
    }
  }
}
</script>

<style scoped lang="less">
.right-mid {
  width: 1076px;
  height: 670px;
  padding-right: 50px;
  box-sizing: border-box;
  background: url("../../../assets/images/index/right_mid.png") no-repeat;
  background-size: 100% 100%;
  margin: 49px 0 38px;
}

.tab-ul {
  display: flex;
  margin: 60px 0 74px;

  li {
    font-size: 30px;
    color: #D1E0FF;
    cursor: pointer;

    &:first-child {
      margin-right: 75px;

      &.hov {
        position: relative;

        &:after {
          position: absolute;
          content: '';
          bottom: -32px;
          left: 0;
          width: 456px;
          height: 27px;
          background: url("../../../assets/images/index/hov.png") no-repeat;
        }
      }
    }

    &.hov {
      position: relative;

      &:after {
        position: absolute;
        content: '';
        bottom: -32px;
        left: 0;
        width: 456px;
        height: 27px;
        background: url("../../../assets/images/index/hov_sm.png") no-repeat;
      }
    }
  }
}

.each {
  margin-bottom: 30px;

  .city-name {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, .8);
  }

  strong {
    font-weight: bold;
  }

  .green-text {
    color: #81D8AE;
  }

  .yellow-text {
    color: #F99C45;
  }
}

</style>
